<template>
  <div class="home_map_initMap">
    <div class="wrapper-title">
      <BaseTitle title="初始化地图" />
    </div>

    <div class="wrapper-content">
      <div>
        <h2>createMap</h2>
        <h3>初始化地图底图，即Arcgis图层</h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div
                <span class="code-orange">ref</span>=<span class="code-green">"map"</span>
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>></<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Maps, Utils }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- mounted -->
            <div>
              <div class="code-indent4">
                mounted () {
              </div>
              <div class="code-indent6">
                <span class="code-orange">this</span>.initMap()
              </div>
              <div class="code-indent4">},</div>
            </div>

            <!-- data -->
            <div>
              <div class="code-indent4">
                data: () {
              </div>
              <div class="code-indent6">
                <span class="code-purpleRed">return</span> {
              </div>
              <div class="comment code-indent8">
                // this.Map的作用：帮助我们保存已经实例化的地图
              </div>
              <div class="code-indent8">
                Map: null,
              </div>
              <div class="comment code-indent8">
                // this.layers的作用：帮助我们保存已经加载过的图层，以便下次显示图层时，可以直接显示，不需要再去创建一个新的图层
              </div>
              <div class="code-indent8">
                layers: {}
              </div>
              <div class="code-indent6">
                }
              </div>
              <div class="code-indent4">
                }
              </div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methods: {
              </div>
              <div class="code-indent6">
                initMap () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.layers['baseLayer']
                =
                <span class="code-green">Maps</span>.baseLayer()
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.layers['FsNhBorderLayer']
                =
                <span class="code-green">Maps</span>.FsNhBorderLayer()
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.layers['FsNhTownLayer']
                =
                <span class="code-green">Maps</span>.FsNhTownLayer()
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.layers['warnLineLayer']
                =
                <span class="code-green">Maps</span>.warnLineLayer()
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent8 comment">// 选择需要加载的地图底图</div>
              <div class="code-indent8">
                <span class="code-default">const</span>
                layers = [
              </div>
              <div class="code-indent10">
                <span class="code-orange">this</span>.layers['baseLayer'],
                <span class="comment">// 白底地图</span>
              </div>
              <div class="code-indent10">
                <span class="code-orange">this</span>.layers['FsNhBorderLayer'],
                <span class="comment">// 佛山南海边框</span>
              </div>
              <div class="code-indent10">
                <span class="code-orange">this</span>.layers['FsNhTownLayer'],
                <span class="comment">// 佛山南海镇街名</span>
              </div>
              <div class="code-indent10">
                <span class="code-orange">this</span>.layers['warnLineLayer']
                <span class="comment">// 24、48小时警戒线</span>
              </div>
              <div class="code-indent8">]</div>
              <div class="code-emptyLine"></div>
              <div class="code-indent8 comment">// 把创建的地图实例保存起来，为后面增加图层做准备</div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.Map
                =
                <span class="code-green">Maps</span>.createMap({
              </div>
              <div class="code-indent10">
                el:
                <span class="code-orange">this</span>.$refs['map'],
              </div>
              <div class="code-indent10">layers</div>
              <div class="code-indent8">})</div>
              <div class="code-emptyLine"></div>
              <div class="comment code-indent8">
                // 给地图绑定点击事件
              </div>
              <div class="code-indent8">
                  <span class="code-orange">this</span>.Map.on('singleclick', event => {
              </div>
              <div class="code-indent10">
                <span class="code-default">const</span>
                { pixel, coordinate } = event
              </div>
              <div class="comment code-indent10">// 经纬度</div>
              <div class="code-indent10">
                <span class="code-default">const</span>
                lng = coordinate[0]
              </div>
              <div class="code-indent10">
                <span class="code-default">const</span>
                lat = coordinate[1]
              </div>
              <div class="comment code-indent10">// 用于记录点击图层时，获取到的feature</div>
              <div class="code-indent10">
                <span class="code-default">const</span>
                features = []
              </div>
              <div class="comment code-indent10">// 用于记录点击图层时，获取到的layer的标记，即layerName</div>
              <div class="code-indent10">
                <span class="code-default">const</span>
                layerNames = []
              </div>
              <div class="code-emptyLine"></div>
              <div class="comment code-indent10">
                // 通过对你点击的地图位置进行遍历，获取该位置的所有feature
              </div>
              <div class="code-indent10">
                <span class="code-orange">this</span>.Map.forEachFeatureAtPixel(pixel, (feature, layer) => {
              </div>
              <div class="comment code-indent12">
                // 把遍历到的feature，push去全局数组features
              </div>
              <div class="code-indent12">
                features.push(feature)
              </div>
              <div class="code-indent12">
                if (layer) {
              </div>
              <div class="comment code-indent12">
                // 同样把遍历到的feature所属的layer的标记，push去全局数组layerNames
              </div>
              <div class="code-indent14">
                layerNames.push(layer.get('name') === null ? '' : layer.get('name'))
              </div>
              <div class="code-indent12">
                }
              </div>
              <div class="code-indent10">
                })
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent10">
                if (features.length) {
              </div>
              <div class="comment code-indent12">
                // 由于遍历出来的feature是多个的，所以其所属的layerName也是多个的，我们取第0个的目的是为了直接去获取最顶层的layer
              </div>
              <div class="code-indent12">
                <span class="code-default">const</span>
                layerName = layerNames[0]
              </div>
              <div class="comment code-indent12">
                // 然而，获取到layerName，可以让我们辨识到是哪个图层，那么我们就可以根据这个layerName去展示该图层相对应的信息，即弹框
              </div>
              <div class="comment code-indent12">
                // 这个弹框操作是针对后面为地图添加图标图层所准备的，因为图标图层不单单只提供该图层的图标展示，还提供了该图层的信息弹框
              </div>
              <div class="comment code-indent12">
                // 所以，我们只需要把这个弹框show出来，同时把feature给到弹框，弹框便会自己去分解信息，再展现出来
              </div>
              <div class="code-indent12">
                <span class="code-orange">this</span>.layers[layerNames].showModal(features[0])
              </div>
              <div class="code-indent10">
                }
              </div>
              <div class="code-indent8">
                })
              </div>

              <div class="code-emptyLine"></div>

              <div class="comment code-indent8">
                // 给地图绑定变化事件，当地图发生拖拽、缩放或旋转时触发
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.Map.getView().on('propertychange', (e) => {
              </div>

              <div class="comment code-indent10">
                // 这个函数的作用：普通图标图层根据层级判断是否显示信息浮框
              </div>
              <div class="code-indent10">
                <span class="code-green">Utils</span>.isShowOverLayer(<span class="code-orange">this</span>.Map)
              </div>

              <div class="code-indent8">})</div>

              <div class="code-indent6">}</div>
              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>

        </code>

        <h2>已有的Arcgis图层</h2>
        <h3>所有Arcgis图层获取的地方均在Maps，调用方法均是Maps.图层名字()</h3>
        <h3>
          <Table
            border
            size="small"
            :columns="apis.arcgisThead"
            :data="apis.arcgisTbody"></Table>
        </h3>

      </div>
    </div>
  </div>
</template>

<script>
import { Maps } from 'base/Gykj_map'
import * as apis from './api/initMap'

export default {
  created () {
    this.apis = apis
  },
  mounted () {
    this.$nextTick(() => {
      // this.initMap()
    })
  },
  methods: {
    initMap () {
      const layers = [
        Maps.baseLayer(),
        Maps.FsNhBorderLayer(),
        Maps.FsNhTownLayer(),
        Maps.warnLineLayer()
      ]

      this.Map = Maps.createMap({
        el: this.$refs['map'],
        layers
      })

      // this.Map.on('singleclick', (event) => {
      //   const pixel = event.pixel
      //   // const lng = event.coordinate[0]
      //   // const lat = event.coordinate[1]
      //   const features = []
      //   const layerNames = []

      //   this.Map.forEachFeatureAtPixel(pixel, (feature, layer) => {
      //     features.push(feature)
      //     if (layer) {
      //       layerNames.push(layer.get('name') === null ? '' : layer.get('name'))
      //     }
      //   })

      //   if (features.length) {
      //     const layerName = layerNames[0]
      //     this.layers[layerName].showModal(features[0])
      //   }
      // })

      // this.Map.getView().on('propertychange', (e) => {
      //   Utils.isShowOverLayer(this.Map)
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
  .home_map_initMap {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: auto;
  }
</style>
